<script setup lang="ts">
import type { Order } from '@/types/mall'
import { getOrderStatusText, getOrderStatusColor } from '@/utils/mall'

interface Props {
  order: Order
  showActions?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  showActions: true
})

const emit = defineEmits<{
  pay: [order: Order]
  cancel: [order: Order]
  confirm: [order: Order]
  review: [order: Order]
  detail: [order: Order]
}>()

// 状态按钮配置
const statusButtons = computed(() => {
  const buttons: Array<{
    text: string
    type: 'primary' | 'info' | 'warning' | 'error'
    action: string
  }> = []

  switch (props.order.status) {
    case 'pending_payment':
      buttons.push(
        { text: '取消订单', type: 'info', action: 'cancel' },
        { text: '立即付款', type: 'primary', action: 'pay' }
      )
      break
    case 'shipped':
      buttons.push(
        { text: '确认收货', type: 'primary', action: 'confirm' }
      )
      break
    case 'delivered':
      buttons.push(
        { text: '评价商品', type: 'primary', action: 'review' }
      )
      break
  }

  return buttons
})

// 处理按钮点击
function handleAction(action: string) {
  switch (action) {
    case 'pay':
      emit('pay', props.order)
      break
    case 'cancel':
      emit('cancel', props.order)
      break
    case 'confirm':
      emit('confirm', props.order)
      break
    case 'review':
      emit('review', props.order)
      break
  }
}

// 查看详情
function viewDetail() {
  emit('detail', props.order)
}
</script>

<template>
  <view class="bg-white rounded-lg overflow-hidden mb-4">
    <!-- 订单状态头部 -->
    <view class="flex items-center justify-between p-4 border-b border-gray-100" @click="viewDetail">
      <view>
        <text class="block text-sm text-gray-800 mb-1">订单号：{{ order.orderNo }}</text>
        <text class="text-xs text-gray-400">{{ formatTime(order.createdAt, 'MM-DD HH:mm') }}</text>
      </view>
      
      <view class="flex items-center gap-1.5">
        <text 
          class="text-sm font-medium" 
          :style="{ color: getOrderStatusColor(order.status) }"
        >
          {{ getOrderStatusText(order.status) }}
        </text>
        <wd-icon name="arrow-right" size="16px" color="#999" />
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="px-4" @click="viewDetail">
      <view
        v-for="item in order.items"
        :key="item.id"
        class="flex py-4 border-b border-gray-50 last:border-b-0"
      >
        <image
          :src="item.product.images[0]"
          class="w-15 h-15 rounded-md mr-3 bg-gray-50"
          mode="aspectFit"
        />
        
        <view class="flex-1">
          <text class="text-sm text-gray-800 line-clamp-1 mb-1">{{ item.product.name }}</text>
          <text v-if="item.sku" class="text-xs text-gray-400 mb-2">
            规格：{{ Object.values(item.sku.specs || {}).join('，') }}
          </text>
          <view class="flex items-center justify-between">
            <text class="text-sm text-red-500 font-medium">{{ formatPrice(item.price) }}</text>
            <text class="text-xs text-gray-400">x{{ item.quantity }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 订单金额 -->
    <view class="flex items-center justify-end p-4 border-t border-gray-100" @click="viewDetail">
      <text class="text-sm text-gray-600">实付金额：</text>
      <text class="text-base font-bold text-red-500 ml-2">{{ formatPrice(order.finalPrice) }}</text>
    </view>

    <!-- 操作按钮 -->
    <view v-if="showActions && statusButtons.length > 0" class="flex justify-end gap-2.5 p-4 bg-gray-50">
      <wd-button
        v-for="button in statusButtons"
        :key="button.action"
        :type="button.type"
        custom-class="min-w-20"
        @click="handleAction(button.action)"
      >
        {{ button.text }}
      </wd-button>
    </view>
  </view>
</template>